import React from 'react'
import {Button, Col, Form, Input, Modal, Row, Select, Table} from 'antd'
import {height} from 'window-size'

const FormItem = Form.Item
const {Option} = Select
const {TextArea} = Input


const ColProps = {
  xl: 6,
  md: 8,
  sm: 12,
  xs: 24,
  style: {
    marginBottom: 6,
  },
}
const formItemLayout = {
  labelCol: {span: 5},
  wrapperCol: {span: 19},
  style: {
    marginBottom: 10,
  },
}

const columns = [
  {
    title: '登录账户',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '员工姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '上级部门',
    dataIndex: 'dept.name',
    key: 'dept.name',
  },
  {
    title: '角色',
    dataIndex: 'role.name',
    key: 'role.name',
  },
]
const modal = ({
                 visible,
                 handleOk,
                 handleCancel,
                 handleSearch,
                 onChange,
                 departments,
                 roles,
                 list: employeeList,
                 rowSelection,
                 pagination,
                 currentItem = {},
                 form: {
                   getFieldDecorator,
                   getFieldsValue,
                   setFieldsValue,
                 },
               }) => {
  const handleConfirm = () => {
    const fields = getFieldsValue()
    const {description, id} = fields
    if (description) {
      handleOk(description, id)
    } else {
      handleOk()
    }
  }

  const hanldeSearch = () => {
    let data = {}
    const fields = getFieldsValue()
    const {belongDeptId, roleId} = fields
    belongDeptId && (data.belongDeptId = belongDeptId)
    roleId && (data.roleId = roleId)
    handleSearch(data)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    fields.belongDeptId = undefined
    fields.roleId = undefined
    setFieldsValue(fields)
    handleSearch()
  }

  return (
    <Modal
      title="优质聊天内容"
      visible={visible}
      onOk={handleConfirm}
      onCancel={handleCancel}
      width={800}
      height={600}
      title="优质聊天内容"
    >
      <Row gutter={24}>
        <Col>
          <FormItem labelCol={{span: 2}} wrapperCol={{span: 18}} label="描述说明">
            {getFieldDecorator('description', {initialValue: currentItem.description})(
              <TextArea/>,
            )}
            {getFieldDecorator('id', {initialValue: currentItem.id})}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24} style={{marginLeft: 24}}>
        <Col {...ColProps}>
          <FormItem {...formItemLayout} label="部门">
            {getFieldDecorator('belongDeptId')(
              <Select style={{width: '100%'}} allowClear placeholder="请选择部门">
                {departments.map(item => (<Option value={item.id} key={item.name}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps}>
          <FormItem {...formItemLayout} label="角色">
            {getFieldDecorator('roleId')(
              <Select style={{width: '100%'}} allowClear placeholder="请选择角色">
                {roles.map(item => (<Option value={item.id} key={item.name}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps}>
          <FormItem>
            <Button type="primary" style={{marginRight: 10}} onClick={hanldeSearch}>查询</Button>
            <Button onClick={handleReset}>重置</Button>
          </FormItem>
        </Col>
      </Row>
      <Table columns={columns} rowKey={record => record.id} onChange={onChange} simple pagination={pagination} rowSelection={rowSelection}
             dataSource={employeeList}/>
    </Modal>
  )
}


export default Form.create()(modal)
